<template>
  <div class="layout-pd">
    <zh-card >
      <zh-form :model="pageData.queryParams" ref="queryFormRef" label-width="160px" :span="8">
        <zh-form-select
            prop="consumerAppId"
            :lazy="true"
            label="请求方应用"
            v-model="pageData.queryParams.consumerAppId"
            :fieldNames="{ label: 'appName', value: 'appId' }"
            funcCode="application0012"
            searchField="appName"
        ></zh-form-select><zh-form-date
          prop="data"
          label="调用时间"
          type="month"
          dataType="common"
          @change="changeYm"
          v-model="pageData.queryParams.data"
      ></zh-form-date>
        <template v-if="pageData.advanced">
        </template>
        <zh-form-query v-model="pageData.advanced" :tableRef="queryTable" :formRef="queryFormRef">

        </zh-form-query>
      </zh-form>
    </zh-card>
    <div class="container">
      <div class="left-item">
        <zh-table title="当月接口调用分析" ref="queryTable"
                  size="mini" funcCode="APILOG0007"
                  :columns="pageData.tableColumns">

          <template #flag_default="{ row }">
            <zh-badge :status="statusMap[row.retCode].status" :text="statusMap[row.retCode].text" />
          </template>
        </zh-table>
      </div>
      <div class="right-item">
<!--          <div ref="chartDom1" class="sub-item" ></div>-->
          <div ref="chartDom2" class="sub-item" ></div>

      </div>
    </div>
  </div>
</template>
<script lang="ts" setup name="apiLogIndex">

// ------------------接收传入参数(组件)-------------------
import * as echarts from 'echarts';
// ------------------钩子函数----------------------------
// 初始化

// ------------------定义子组件--------------------------
const queryTable = ref();
const queryFormRef = ref();
const changeYm = () => {
  //去除-
  pageData.queryParams.ym = pageData.queryParams.data.replaceAll('-','');

};
const statusMap = {
  1: {
    status: 'processing',
    text: '成功',
  },
  0: {
    status: 'error',
    text: '失败',
  },
};
// ------------------变量区------------------------------
const pageData = reactive({
  advanced: false,
  queryParams: {} as any,
  tableColumns: [
    {
      field: 'consumerAppName',
      title: '调用方应用',
      visible: true,
      align: 'center',
      minWidth: 80,
    },
    {
      field: 'title',
      title: '接口名称',
      visible: true,
      align: 'center',
      minWidth: 80,
    },
    {
      field: 'interfaceCode',
      title: '接口编号',
      visible: true,
      align: 'center',
      minWidth: 80,
    },
    {
      field: 'retCode',
      title: '交易结果状态',
      visible: true,
      align: 'center',
      minWidth: 150,
      slots: {
        // 使用插槽模板渲染
        default: 'flag_default',
      },
    },
    {
      field: 'count',
      title: '调用次数',
      visible: true,
      align: 'center',
      minWidth: 80,
    },
  ],
  dictData: {} as any,
  title: '',
  detailVisible: false,
  editFlag: false,
  selectRow: {} as any,
  saveLoading: false,
  showType: true,
  campusParam: {} as any,
});
//图标1的数据
const chart1Option ={
  // 这里是ECharts的配置项，可以根据需要绘制不同类型的图表
  title: {
    text: '近七日调用接口次数'
  },
  grid: {
    top: '45', // 距离容器上边界的距离
    right: '10', // 距离容器右边界的距离
    bottom: '3', // 距离容器下边界的距离
    left: '10', // 距离容器左边界的距离
    containLabel: true, // 包含标签的绘图区域
  },
  legend: {
    data: ['总次数', '成功', '失败']
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    data: ["日期1", "日期2", "日期3", "日期4", "日期5","日期6","日期7"]
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '总次数',
      type: 'line',
      data: [120, 200, 150, 80, 70,20,11],
      stack: 'Total',
    },
    {
      name: '成功',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '失败',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
  ]
};
const chartDom2 = ref();
//每个label配置项
const labelOption = {
  show: true,
  position: 'insideBottom',
  distance: 15,
  align: 'left',
  verticalAlign: 'middle',
  rotate: 90,
  formatter: '{c}  {name|{a}}',
  fontSize: 16,
  rich: {
    name: {}
  }
};
//设置到echarts配置项
const chart2Option = {
  title: {
    text: '近七日接口调用详情'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['总调用次数', '成功', '失败']
  },
  toolbox: {
    show: true,
    orient: 'vertical',
    left: 'right',
    top: 'center',
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar', 'stack'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  xAxis: [
    {
      type: 'category',
      axisTick: { show: false },
      data: ['2012', '2013', '2014', '2015', '2016']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '总调用次数',
      type: 'bar',
      barGap: 0,
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [320, 332, 301, 334, 390]
    },
    {
      name: '成功',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290]
    },
    {
      name: '失败',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190]
    }
  ]
};



// ------------------方法区------------------------------
// const chartDom1 = ref();
const chartInit = (chartRef,option)=>{
  const instance = echarts.init(chartRef.value);
  instance.setOption(option);
}

onMounted(async () => {
  await nextTick();
  await queryApiLogByWeek();
  // chartInit(chartDom1,chart1Option);
  chartInit(chartDom2,chart2Option);
  queryTable.value.query();
})

const queryApiLogByWeek=async ()=>{
  await $api.common.send.post('APILOG0008', {}).then((res) => {
    chart1Option.xAxis.data = res.result.dates;
    chart1Option.series[0].data = res.result.sunCounts;
    chart1Option.series[1].data = res.result.successCounts;
    chart1Option.series[2].data = res.result.errorCounts;

    chart2Option.xAxis[0].data = res.result.dates;
    chart2Option.series[0].data = res.result.sumCounts;
    chart2Option.series[1].data = res.result.successCounts;
    chart2Option.series[2].data = res.result.errorCounts;
  });
}
</script>
<style lang="scss" scoped>
.container {
  display: flex; //试用flexbox布局
  background-color: rgb(255, 255, 255);
}

.left-item {
  flex: 1; /* 占据剩余空间的一部分 */
  padding: 10px;
  height: 900px;
}

.right-item {
  background-color: rgb(255, 255, 255);
  flex: 1; /* 同样占据剩余空间的一部分 */
  display: flex; /* 内部也使用 Flexbox 布局 */
  flex-direction: column; /* 子元素垂直排列 */
  padding: 10px;
  height: 870px;
}

.sub-item {
  padding: 10px;
  height: 870px;
  margin-bottom: 10px; /* 子容器之间留出间距 */
}
</style>
